<template>
  <div id="app">
    <header>
      <acm-header />
    </header>
    <main>
      <keep-alive :exclude="['UpdateBlog','NewBlog']">
        <router-view />
      </keep-alive>
    </main>
    <footer>
      <acm-footer />
    </footer>
  </div>
</template>

<script>

import AcmHeader from '@/components/AcmHeader'
import AcmFooter from '@/components/AcmFooter'

export default {
  name: 'App',
  components: { AcmFooter, AcmHeader }
}
</script>

<style>
  html, body {
    margin: 0;
    background-color: #f5f5f5;
    height: 100%;
  }

  body .el-table th.gutter {
    display: table-cell !important;
  }

  body .el-table colgroup.gutter {
    display: table-cell !important;
  }

  #app {
    min-height: 100%;
    position: relative; /*位置relative, 作为footer位置的参考*/
  }

  main {
    padding-top: 62px;
    padding-bottom: 120px;
  }

  footer {
    color: white;
    height: 120px; /*设定footer高度*/
    text-align: center;
    position: absolute; /*设定footer绝对位置在底部*/
    bottom: 0;
    width: 100%; /*展开footer宽度*/
    background-color: #434345;
  }
</style>
